<template>
  <div class="modified-data">
    <div class="head">
      <span class="iconfont iconjiantou2" @click="retreat"></span>
      <div>编辑资料</div>
    </div>
    <div class="img" v-if="userInfo">
      <img :src=" 'http://127.0.0.1:3000' + userInfo.head_img" alt class="avatar" />
    </div>
    <van-uploader :after-read="afterRead" />
    <NavBar
      labelText="修改昵称"
      :descText="userInfo.nickname"
      @barClick="handleBar('修改昵称')"
      v-if="userInfo"
    />
    <NavBar labelText="修改手机号" @barClick="handleBar('修改手机号')" />
    <NavBar labelText="修改密码" @barClick="handleBar('修改密码')" />
    <NavBar labelText="修改头像" @barClick="handleBar('修改头像')" />
    <NavBar
      labelText="修改性别"
      :descText="userInfo.gender==1?'男':'女'"
      @barClick="handleBar('修改性别')"
      v-if="userInfo"
    />
    <NavBar labelText="完成修改" @barClick="handleBar('完成修改')" />

    <!-- 修改昵称 -->
    <van-dialog
      v-model="isNickname"
      :title="amend"
      show-cancel-button
      @confirm="editProfile({nickname:value})"
    >
      <van-field v-model="value" :placeholder="placeholder" :type="type"></van-field>
    </van-dialog>
    <!-- 修改密码 -->
    <van-dialog
      v-model="isPassword"
      :title="amend"
      show-cancel-button
      @confirm="editProfile({password:isShowPassword})"
    >
      <van-field v-model="isShowPassword" :placeholder="placeholder" :type="type"></van-field>
    </van-dialog>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>

<script>
import logo from "@/assets/logo.png";
import NavBar from "@/components/NavBar.vue";
import { log } from "util";
export default {
  data() {
    return {
      isNickname: false,
      isPassword: false,
      value: "",
      isShowPassword: "",
      userInfo: null,
      amend: "",
      placeholder: "",
      type: "",
      show: false,
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 }
      ]
    };
  },
  components: {
    NavBar
  },
  created() {
    this.loadPage();
  },
  methods: {
    // 封装好的 获取数据
    loadPage() {
      this.$axios({
        url: "http://127.0.0.1:3000/user/" + localStorage.getItem("userId"),
        method: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        const { message, data } = res.data;
        if (message == "获取成功") {
          this.userInfo = data;
          console.log(this.userInfo);
        }
      });
    },
    // 跳转回资料页
    retreat() {
      this.$router.replace({ path: "/personal" });
    },
    afterRead(fileObj) {
      var formData = new FormData();
      formData.append("file", fileObj.file);

      // 使用 ajax 上传图片
      this.$axios({
        url: "/upload",
        method: "post",
        data: formData,
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(1);
        const { message, data } = res.data;
        if (message == "文件上传成功") {
          this.editProfile({
            head_img: data.url
          });
        }
      });
    },
    onSelect(item) {
      const dateobj = {
        gender: item.gender
      };
      this.editProfile(dateobj);
      this.show = false;
      this.loadPage();
    },
    handleBar(pageName) {
      if (pageName == "修改昵称") {
        // 需要替换成修改框
        // this.$toast("点击了");
        this.amend = "修改昵称";
        this.placeholder = "请输入新昵称";
        this.isNickname = true;
        this.type = "text";

        // console.log(isShow);
      } else if (pageName == "修改密码") {
        this.amend = "修改密码";
        this.placeholder = "请输入新密码";
        this.type = "password";
        this.isPassword = true;
      } else if (pageName == "完成修改") {
        this.$router.replace({ path: "/personal" });
      } else if (pageName == "修改性别") {
        this.show = true;
      }
    },
    // 修改昵称
    setNickname() {
      // 修改名称
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        data: {
          nickname: this.value
        },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
      });
    },
    // 修改密码
    setPassword() {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        data: {
          password: this.isShowPassword
        },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
      });
    },
    // 封装好的修改函数
    editProfile(newData) {
      this.$axios({
        url: "user_update/" + localStorage.getItem("userId"),
        method: "post",
        data: newData,
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
        this.loadPage();
      });
    }
  }
};
</script>

<style lang="less" scoped>
.modified-data {
  .head {
    display: flex;
    padding: 4.44vw 6.67vw 4.44vw 6.67vw;
    font-size: 3.89vw;
    font-weight: 700;
    .iconjiantou2 {
      font-size: 3.89vw;
    }
    div {
      flex: 1;
      text-align: center;
    }
  }
  .van-uploader {
    position: absolute;
    top: 16.67vw;
    left: 38.89vw;
    opacity: 0;
  }
  .img {
    text-align: center;
    margin-top: 2.78vw;
    .avatar {
      width: 19.44vw;
      height: 19.44vw;
      // object-fit: cover;
      border-radius: 50%;
    }
  }
}
</style>